<template>
  <headPage></headPage>
  <div class="main_box my_info">
    <div class="left">
      <div class="left_img">
        <div class="head_img">
          <img :src="userInfo.avatar" alt="" />
          <!-- <img class="img_icon" src="../../assets/login/12.png" alt="" /> -->
        </div>
        <div class="head_name">{{ userInfo.real_name }}</div>
      </div>
      <div class="left_tabs">
        <div
          class="tabs_item"
          @click="selectTabs(index)"
          v-for="(item, index) in tabList"
          :key="index"
        >
          <div v-if="tabIndex == index" class="active_icon"></div>
          <img
            v-if="tabIndex != index"
            class="item_img"
            :src="quireImg(item.icon)"
            alt=""
          />
          <img
            v-else
            class="item_img"
            :src="quireImg(item.select_icon)"
            alt=""
          />
          <div class="item_text">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="right" v-if="componentShow">
      <component ref="componentRef" :is="isComponent"></component>
    </div>
  </div>
  <footerPage></footerPage>
</template>


<script setup name="my">
import emitter from "@/utils/mitt.js";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import myInformation from "./myInformation.vue";
import myNews from "./myNews.vue";
import myWallet from "./MyWallet/myWallet.vue";
import myCourse from "./myCourse.vue";
import myCollection from "./myCollection.vue";
import myDevice from "./myDevice.vue";
import setUpContent from "./setUp/index.vue";
import myPoints from "./MyPoints/myPoints.vue";
import myAssess from "./MyAssess/myAssess.vue";
import myOrder from "./MyOrder/myOrder.vue";
import { ref, reactive, shallowRef, markRaw, toRefs, watch ,onMounted, onBeforeUnmount } from "vue";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const { userInfo } = toRefs(userStore);

import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

let componentShow = ref(true);
let tabIndex = ref(0);
let routerType = route.query.type;

let componentRef = ref(null);
let isComponent = ref(myInformation);
onMounted(() => {
  emitter.on("changeNews", () => {
    componentShow.value = false;
    setTimeout(() => {
      componentShow.value = true;
      isComponent = tabList[1].component;
      tabIndex.value = 1;
    }, 200);
    // if (routerType == "news") {
    //   isComponent.value = myNews;
    //   tabIndex.value = 1;
    // } else {
    //   isComponent.value = myInformation;
    // }
  });
});
onBeforeUnmount(() => {
  emitter.off('changeNews');
})
// if (routerType == "news") {
//   isComponent.value = myNews;
//   tabIndex.value = 1;
// } else {
//   isComponent.value = myInformation;
// }

function quireImg(imgPath) {
  return new URL(`../../assets/my/${imgPath}`, import.meta.url).href;
}

let tabList = reactive([
  {
    name: "我的信息",
    icon: "2.png",
    select_icon: "2_a.png",
    component: myInformation,
  },
  {
    name: "消息中心",
    icon: "3.png",
    select_icon: "3_a.png",
    component: myNews,
  },
  // {
  //   name: "我的钱包",
  //   icon: "4.png",
  //   select_icon: "4_a.png",
  //   component: myWallet,
  // },
  // {
  //     name: '邀请返利',
  //     icon: '5.png',
  //     select_icon: '6_a.png'
  // },
  {
    name: "我的课程",
    icon: "6.png",
    select_icon: "5_a.png",
    component: myCourse,
  },
  {
    name: "我的订单",
    icon: "7.png",
    select_icon: "7_a.png",
    component: myOrder,
  },
  {
    name: "能力评估",
    icon: "8.png",
    select_icon: "8_a.png",
    component: myAssess,
  },
  // {
  //     name: '我的简历',
  //     icon: '9.png',
  //     select_icon: '2_a.png',
  //     component: ""
  // },
  {
    name: "我的积分",
    icon: "10.png",
    select_icon: "10_a.png",
    component: myPoints,
  },
  {
    name: "我的收藏",
    icon: "11.png",
    select_icon: "11_a.png",
    component: myCollection,
  },
  {
    name: "我的设备",
    icon: "12.png",
    select_icon: "12_a.png",
    component: myDevice,
  },
  {
    name: "设置中心",
    icon: "13.png",
    select_icon: "13_a.png",
    component: setUpContent,
  },
]);
function selectTabs(index) {
  tabIndex.value = index;
  isComponent = tabList[index].component;
  scrollToTop();
}
const scrollToTop = () => {
  window.scrollTo({
    // top: document.documentElement.offsetHeight, //回到底部
    top: 0, //回到顶部
    left: 0,
    behavior: "smooth", //smooth 平滑；auto:瞬间
  });
};
</script>

<style lang="scss" scoped>
.my_info {
  margin-top: 110px;
  margin-bottom: 24px;
  display: flex;
  .left {
    width: 130px;
    .left_img {
      width: 130px;
      height: 110px;
      background: url(../../assets/my/1.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      padding-top: 23px;
    }
    .left_tabs {
      height: 318px;
      padding: 12px 0;
      background: #fff;
      margin-top: 9px;
      .tabs_item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 7.5px 0;
        cursor: pointer;
        .active_icon {
          background: #1f52ae;
          width: 2px;
          height: 24px;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        .item_img {
          width: 10px;
          height: 10px;
          margin-right: 6px;
        }
        .item_text {
          font-size: 9px;
        }
      }
    }
  }
  .right {
    flex: 1;
    margin-left: 12px;
  }
}
.head_img {
  width: 44px;
  height: 44px;
  position: relative;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  .img_icon {
    width: 14px;
    height: 14px;
    position: absolute;
    right: 2px;
    bottom: 2px;
  }
}
.head_name {
  margin-top: 10px;
  font-size: 10px;
  font-weight: 500;
}
</style>
